
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
    <title>报修管理首页</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/roleManagement.css">
    <script src="${pageContext.request.contextPath}/static/jquery/jquery-3.1.1.js"></script>
    <script src="${pageContext.request.contextPath}/static/jquery/jquery.validate.js"></script>
    <link rel="stylesheet" href="/static/frame/layui/css/layui.css">
    <link rel="stylesheet" href="/static/frame/static/css/style.css">
    <link rel="icon" href="/static/frame/static/image/code.png">

    <style>
        .showmessages{
            position: absolute;
            width: 100%;height: 600px;
            margin-top: 100px;
        }
        label.error {
            position: absolute;
            margin-top: 68px;
            margin-left: 480px;
            color: red;
            font-size: 14px;
        }
    </style>
</head>
<body>
<div  class="pageall">
    <div class="backphall">
        <div class="titleall">
            <div class="titleph">
                <img src="${pageContext.request.contextPath}/static/images/repair.png" style="width:100%;height:100%;"/>
            </div>
            <div class="titleword">报修管理 >>> 报修列表</div>
        </div>
        <form action="selectRepair" method="post" id="selectform">
            <input type="text" class="selectbox" name="repair_user_name" placeholder="报修用户姓名（不输入则查询全部信息）"/>
            <input type="submit" value="查询" class="selectbutton"/>
        </form>
        <div class="contentall"></div>
    </div>
    <div id="div1" class="showmessages">
        <table class="layui-table">
            <thead>
            <tr>
                <th>报修编号</th>
                <th>报修描述</th>
                <th>报修用户姓名</th>
                <th>用户住所</th>
                <th>处理人</th>
                <th>创建时间</th>
                <th>报修处理情况</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="clear" style="display: none">
            <script>var arr1=[]</script>
            <c:forEach items="${repairList}" var="o" varStatus="sta">
                    <tr id="reporder${sta.count}">
                        <td>${sta.count}</td>
                        <td>${o.getRepair_describe()}</td>
                        <td>${repairUserList[sta.count-1].user_name}</td>
                        <td>${repairHostList[sta.count-1].host_building}栋${repairHostList[sta.count-1].host_unit}单元${repairHostList[sta.count-1].host_housenumber}号</td>
                        <td>${repairAdminList[sta.count-1].admin_name}</td>
                        <td class="createtime">${o.getRepair_createtime()}</td>
                        <td class="status">${o.getRepair_status()}</td>
                        <td>
                            <c:if test="${o.getRepair_status()==0}">
                            <input onclick="modify(this,${o.getRepair_id()})"type="button" value="修理"  style="float: left; margin-left:20px;cursor:pointer;width: 60px;height: 30px;background-color: deepskyblue;border: 0px">
                            &nbsp;&nbsp;&nbsp;&nbsp;
                            </c:if>
                            <c:if test="${o.getRepair_status()==1}">
                                <input onclick="over(this,${o.getRepair_id()})"type="button" value="完毕"  style="float: left; margin-left:20px;cursor:pointer;width: 60px;height: 30px;background-color: deepskyblue;border: 0px">
                                &nbsp;&nbsp;&nbsp;&nbsp;
                            </c:if>
                            <input onclick="drop(this,${o.getRepair_id()})" type="button" value="删除" style="float:left; margin-left:20px;text-align:center;line-height:30px;cursor:pointer;width: 60px;height: 30px;background-color: indianred;border: 0px">
                        </td>
                    </tr>
                    <script>arr1.push($("#reporder${sta.count}")[0])</script>
            </c:forEach>
            </tbody>

        <tbody id="biuuu_city_list"></tbody>
        </table>
        <div id="demo20"></div>
    </div>
    <div id="div2" style="position: absolute;width: 260px;height: 120px;margin-top: 240px;margin-left: 540px;border: 1px solid grey;display: none;background: grey">
        <div style="text-align: center;font-size: 26px;color: red;margin-top: 20px">确定删除吗？</div>
        <button id="confirm" type="button" name="buttonValue1" style="margin-left: 80px;margin-top: 20px">确定</button>
        <button onclick="click3()" type="button" name="buttonValue2" style="margin-left: 20px">取消</button>
    </div>
</div>

</body>
<script src="${pageContext.request.contextPath}/static/frame/layui/layui.js" charset="utf-8"></script>
<script>
    /*
    单击修改，传参到controller层
     */
    function modify(e,index) {
            $.ajax({
                type:'POST',
                url:"${pageContext.request.contextPath}/modifyRepair.do",
                data:{
                    repair_id:index,
                },
                dataType:"json",
                success:function (data) {
                    $.ajax({
                        type:'POST',
                        url:"${pageContext.request.contextPath}/repairflush.do",
                        data:"",
                        dataType:"json",
                        success:function(data){
                            if(data==true){
                                window.location.href="${pageContext.request.contextPath}/repairListAble.do";
                                location.reload(true);
                            }
                        }
                    });
                }
            })
    }
    function over(e,index) {
        $.ajax({
            type:'POST',
            url:"${pageContext.request.contextPath}/overRepair.do",
            data:{
                repair_id:index,
            },
            dataType:"json",
            success:function (data) {
                $.ajax({
                    type:'POST',
                    url:"${pageContext.request.contextPath}/repairflush.do",
                    data:"",
                    dataType:"json",
                    success:function(data){
                        if(data==true){
                            window.location.href="${pageContext.request.contextPath}/repairListAble.do";
                            location.reload(true);
                        }
                    }
                });
            }
        })
    }

    /*
    分页操作
    */
    function nodeToString ( node ) {
        var tmpNode = document.createElement( "div" );
        tmpNode.appendChild( node.cloneNode( true ) );
        var str = tmpNode.innerHTML;
        tmpNode = node = null; // prevent memory leaks in IE
        return str;
    }
    function clear(){
        document.getElementById('clear').innerHTML=null;
    }

    layui.use(['carousel', 'laypage','form','upload','jquery'], function() {
        var carousel = layui.carousel
            , form = layui.form
            , $ = layui.jquery
            , upload = layui.upload
            , laypage = layui.laypage

        //常规轮播
        carousel.render({
            elem: '#test1'
            , arrow: 'always'
        });
        var data12 = arr1;
        laypage.render({
            elem: 'demo20'
            , count: data12.length
            , jump: function (obj) {
                //模拟渲染
                        document.getElementById('biuuu_city_list').innerHTML = function () {
                            var arr = []
                                , thisData = data12.concat().splice(obj.curr * obj.limit - obj.limit, obj.limit);
                            layui.each(thisData, function (index, item) {
                                var itemstr = nodeToString(item);
                                arr.push(itemstr);
                            });
                            clear();
                            return arr.join('');
                }();
            }
        });
    });
    var w=$(window).width();
    var h=$(window).height();
    $(".pageall").innerHeight(h+"px");
    $(".pageall").innerWidth(w+"px");

    /*
使用jquery validate限制查询表单输入
*/

    /**
     * 通过后台传入的“1”或者“0”或者“2”，在页面上显示“处理中”、“未处理”和“已处理”
     */
    showPage();
    function showPage() {
        var status=$(".status");
        status.each(function () {   //用each（）遍历class为status的数组
            switch ($(this).text()) {
                case "0":
                    $(this).text("未处理");
                    $(this).css("color","red");
                    break;
                case "1":
                    $(this).text("处理中");
                    $(this).css("color","blue");
                    break;
                case "2":
                    $(this).text("已处理");
                    $(this).css("color","green");
                    break;
                default:
                    $(this).text("其他");
                    $(this).css("color","yellow");
            }
        });
    }

    /**
     * 单击删除按钮时，确认框显示
     */
    function drop(e,index) {
        $("#div2").css({"display":"block"});
        $("#confirm").click(function () {
        $.ajax({
            type:'POST',
            url:"${pageContext.request.contextPath}/deleteRepairController.do",
            data:{
                repair_id:index
            },
            dataType:"json",
            success:function (data) {
                $.ajax({
                    type:'POST',
                    url:"${pageContext.request.contextPath}/repairflush.do",
                    data:"",
                    dataType:"json",
                    success:function(data){
                        if(data==true){
                            window.location.href="${pageContext.request.contextPath}/repairListAble.do";
                            location.reload(true);
                        }
                    }
                });
            }
        })
        });
    }
    /**
     * 点击“取消”按钮，确认框消失
     */
    function click3() {
        $("#div2").css({"display":"none"});
    }
    /**
     * 时间显示，调整格式
     */
    showtime();
    function showtime() {
        var createtime=$(".createtime");
        createtime.each(function () {
            //调用时间格式转换函数formatDateTime()
            $(this).text(formatDateTime($(this).text()))
        })
    }
    /**
     *
     * 在页面上，转换时间格式
     * @param inputTime
     * @returns {string}
     */
    function formatDateTime(inputTime) {
        var date = new Date(inputTime);
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        m = m < 10 ? ('0' + m) : m;
        var d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        var h = date.getHours();
        h = h < 10 ? ('0' + h) : h;
        var minute = date.getMinutes();
        var second = date.getSeconds();
        minute = minute < 10 ? ('0' + minute) : minute;
        second = second < 10 ? ('0' + second) : second;
        return y + '-' + m + '-' + d+' '+h+':'+minute+':'+second;
    };
</script>
</html>
